<template>
  <rx-layout>
    <div slot="center">
      <rx-fit>
        <div slot="toolheader"  foldheader="true" foldbtn="true" border="true">
          <p>{{i18n('title.putAway', '可以收起来的数据')}}</p>
          <p>{{i18n('title.foldbtn', 'RxFit组件的使用=>foldbtn:true展示收起箭头,foldheader:true一开始默认打开false收起,border:true显示边框')}}</p>
        </div>
        <div style="overflow: hidden;">
        <div class="retre">
          <!-- 用接口连接 -->
          <rx-tree
            showLine
            :multiSelect="true"
            :expandOnLoad="0"
            :showTreeIcon="true"
            :onlySelLeaf="true"
            ref="rxTree"
            url="/api-system/system/core/sysTransferSetting/jsonAll"
            @select="selectTransfer"
          />
        </div>
        <!-- 用treeData数据结构-->
        <div class="retre">
          <rx-tree
            ref="rxTree"
            :treeData="treeData"
            :multiSelect="true"
            :expandOnLoad="0"
            :showTreeIcon="true"
            :onlySelLeaf="true"
            :icon="[{slot:'meh',type:'frown-o'},{slot:'smile',type:'smile-o'}]"
            @rightClick="rightClick"
          />
        </div>
      </div>
      <div class="arow">
        <!-- labelCol，wrapperCol 为单列布局 labelCol1，wrapperCol1 为双列布局 -->
        <a-row>
          <a-col :span="24">
            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('title.processor', '表单数据处理器')">
              <a-textarea
                :placeholder="i18n('title.processor', '表单数据处理器')"
                v-decorator="['noPkSetting', {rules: [{required: false, message: $ti18('rxDecorator.input','','请输入') + 'NO_PK_SETTING_'}]}]"
                :rows="4"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('title.processor', '表单数据处理器')">
              <a-input
                  :placeholder="i18n('title.processor', '表单数据处理器')"
                v-decorator="['dataHandler', {rules: [{required: false, message: i18n('title.processor','表单数据处理器','input')}]}]"
                :rows="4"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="TREE_">
              <a-input-number
                :min="0"
                :max="1000000"
                placeholder="TREE_"
                v-decorator="['tree', {rules: [{required: false, message: $ti18('rxDecorator.input','请输入') + 'TREE_'}]}]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <!-- <p>rx-codemirror 显示java输入框</p> -->
        <!--  -->
        <div class="codemirror">
          <rx-codemirror
            ref="javaCode"
            mode="java"
            :height="150"
            v-decorator="['javaCode', {rules: [{required: true, message:i18n('form.javaScript','JAVA脚本','input')}]}]"
          ></rx-codemirror>
        </div>
      </div>
      </rx-fit>
    </div>
  </rx-layout>
</template>

<script>
import { RxLayout, RxTree, RxCodemirror,RxFit} from "@lowcode/jpaas-common-lib"
export default {
  name: 'Common',
  components: {
    RxLayout,
    RxTree,
    RxCodemirror,
    RxFit
  },
  data() {
    return {
      visible: false,
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      labelCol1: { span: 3 },
      wrapperCol1: { span: 19 },
      confirmLoading: false,
      mdl: {},
      form: this.$form.createForm(this),
      val: {
        values: '1,2,3',
        labels: 'a1,b2,c3'
      },
      // 数据结构
      treeData: [
        {
          name: this.i18n('title.title1','标题一'),
          id: '1',
          ps_id: '1',
          //子菜单
          children: [
            {
              name: this.i18n('title.title1','标题一'),
              id: '2',
              ps_id: '2'
            }
          ]
        },
        {
          name: this.i18n('title.title2','标题2'),
          id: '3',
          ps_id: '3'
        }
      ]
    }
  },
  created() {},
  methods: {
      i18n(name, text, key) {
          return this.$ti18(name, text, "assemblyLang", key);
      },
    rightClick() {
      console.log(this.i18n('title.click','右键'))
    }
  }
}
</script>

<style scoped>
.retre {
  float: left;
  margin-left: 20px;
}
.arow {
  clear: both;
  width: 80%;
  margin-top: 50px;
}
.codemirror {
  border: 1px solid #f0f0f0;
  margin-left: 50px;
}
</style>